{% extends "zerver/portico.html" %}
{% set entrypoint = "integrations" %}

{% block customhead %}
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{% endblock %}

{% block hello_page_container %} hello-main{% endblock %}

{% block portico_content %}

{% include 'zerver/landing_nav.html' %}
{% include 'zerver/gradients.html' %}
{% import 'zerver/integrations/macros.html' as integration_macros %}

<div class="portico-landing integrations">
    <div class="main">
        <div class="padded-content">
            <div class="inner-content">
                <div class="integration-main-text">
                    <header>
                        <h1 class="portico-page-heading">
                            {% trans %}Over {{integrations_count_display}} native integrations.{% endtrans %}
                        </h1>
                    </header>
                    <h2 class="portico-page-subheading">
                        {% trans %}
                        And hundreds more through
                        <a href="/integrations/zapier">Zapier</a>
                        and
                        <a href="/integrations/ifttt">IFTTT</a>.
                        {% endtrans %}
                    </h2>
                </div>

                <div id="integration-search">
                    <div class="searchbar">
                        <div class="searchbar-reset">
                            <i class="fa fa-search" aria-hidden="true"></i>
                            <input type="text" class="search_input" placeholder="{{ _('Search integrations') }}"/>
                        </div>
                    </div>
                </div>

                {% set dropdown_label = _('Filter by category') %}
                {% if selected_category_slug != 'all' %}
                {% set dropdown_label = categories_dict.get(selected_category_slug, dropdown_label) %}
                {% endif %}
                <div class="integration-categories-dropdown">
                    <div class="integration-toggle-categories-dropdown">
                        <h3 class="dropdown-category-label">{{ dropdown_label }}</h3>
                        <i class="fa fa-angle-down" aria-hidden="true"></i>
                    </div>
                    <div class="dropdown-list">
                        <a href="/integrations/">
                            <h4 class="integration-category {% if selected_category_slug == 'all' %}selected{% endif %}" data-category="all">All</h4>
                        </a>
                        {% for category in categories_dict.keys() %}
                        <a href="/integrations/category/{{ category }}">
                            <h4 class="integration-category {% if selected_category_slug == category %}selected{% endif %}" data-category="{{ category }}">
                                {{ categories_dict[category] }}
                            </h4>
                        </a>
                        {% endfor %}
                        <h4 class="heading">{% trans %}Custom integrations{% endtrans %}</h4>
                        <a href="/api/incoming-webhooks-overview">
                            <h4>{% trans %}Incoming webhooks{% endtrans %}</h4>
                        </a>
                        <a href="/api/writing-bots">
                            <h4>{% trans %}Interactive bots{% endtrans %}</h4>
                        </a>
                        <a href="/api/rest">
                            <h4>{% trans %}REST API{% endtrans %}</h4>
                        </a>
                    </div>
                </div>

                <div class="catalog">
                    <div class="integration-categories-sidebar">
                        <h3>{% trans %}Categories{% endtrans %}</h3>
                        <a href="/integrations/">
                            <h4 data-category="all" class="integration-category {% if selected_category_slug == 'all' %}selected{% endif %}">{% trans %}All{% endtrans %}</h4>
                        </a>
                        {% for category in categories_dict.keys() %}
                        <a href="/integrations/category/{{ category }}">
                            <h4 data-category="{{ category }}" class="integration-category {% if selected_category_slug == category %}selected{% endif %}">
                                {{ categories_dict[category] }}
                            </h4>
                        </a>
                        {% endfor %}
                        <hr />
                        <h3>{% trans %}Custom integrations{% endtrans %}</h3>
                        <a href="/api/incoming-webhooks-overview">
                            <h4>{% trans %}Incoming webhooks{% endtrans %}</h4>
                        </a>
                        <a href="/api/writing-bots">
                            <h4>{% trans %}Interactive bots{% endtrans %}</h4>
                        </a>
                        <a href="/api/rest">
                            <h4>{% trans %}REST API{% endtrans %}</h4>
                        </a>
                    </div>

                    <div class="integration-lozenges">
                        {% for integration in visible_integrations %}
                        <a href="/integrations/{{ integration.name }}{% if selected_category_slug != 'all' %}?category={{ selected_category_slug }}{% endif %}">
                            {{ integration_macros.render_integration_lozenge(integration) }}
                        </a>
                        {% endfor %}
                        <hr />
                        <div class="integration-request center">
                            <p>Don't see an integration you need? We'd love to help.</p>
                            <a href="/api/integrations-overview" class="button green">
                                Create your own
                            </a>
                            <span class="integration-divider">
                                or
                            </span>
                            <a href="/help/request-an-integration" class="button green">
                                Request an integration
                            </a>
                        </div>
                    </div>
                </div>
            </div> <!-- .inner-content -->
        </div> <!-- .padded-content -->
    </div> <!-- .main -->
</div> <!-- .portico-landing -->

{% endblock %}
